<template>
	<view>
		<view v-if="!addressStr" class="btn-box">
			<button @click="chooseAddr" size="mini" type="primary">请选择收货地址+</button>
		</view>
		<!-- 放选择后的地址信息 -->
		<view v-else @click="chooseAddr" style="padding:10px">
			<view style="display: flex;justify-content: space-between;">
				<view class="name">
					收货人：{{ address.userName }}
				</view>
				<view class="call">
					电话： {{ address.telNumber }}
				</view>
			</view>
			<view class="addr">收货地址：{{ addressStr }}</view>
		</view>

		<image class="border-pic" src="../../static/cart_border@2x.png" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		name: "my-address",
		computed: {
			...mapGetters('user', ['addressStr']),
			...mapState('user', ['address'])
		},
		data() {
			return {

			};
		},
		methods: {
			async chooseAddr() {
				// 要选择微信上的地址
				const res = await uni.chooseAddress()
				if (res[0]) {
					uni.showToast({
						title: '没选择任何地址',
						icon: 'error'
					})
				} else {
					// 有地址，拿到地址存起来
					this.$store.commit('user/setAddress', res[1])
				}
			}
		}
	}
</script>

<style lang="scss">
	.btn-box {
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.border-pic {
		width: 100%;
	}
</style>
